/**
 *  @name BarChartLeft
 * @desc 左侧柱状图
 * */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入柱状图
import "echarts/lib/chart/bar"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

import "./styles.css"

class BarChartLeft extends Component {
  state = {
    idd: "",
    buffer: [],
    faram: []
  }
  myChart = null
  componentDidMount() {
    this.init()
  }

  componentDidUpdate() {
    const { buffer = [], faram = [], idd } = this.state
    const { data01 = [], data02 = [], ids } = this.props
    const _buffer = JSON.stringify(buffer)
    const _faram = JSON.stringify(faram)
    const _data01 = JSON.stringify(data01)
    const _data02 = JSON.stringify(data02)

    if (_buffer !== _data01 || _faram !== _data02 || idd !== ids) {
      this.init()
      this.setState({ buffer: data01, faram: data02, idd: ids })
    }
  }
  init = () => {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.props.ids))
    this.updateData()
    this.myChart.resize()
  }
  updateData = () => {
    const { data01, data02 } = this.props

    this.myChart.setOption({
      tooltip: {
        // trigger: 'item',
        formatter: "{b}：{c}人"
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        nameTextStyle: {
          // 坐标轴名称样式
          color: "#666",
          fontSize: 15
        },
        axisLine: {
          show: true,
          //  -----   箭头 -----
          symbol: ["none", "arrow"], // 是否显示轴线箭头
          symbolSize: [8, 8], // 箭头大小
          symbolOffset: [0, 10], // 箭头位置
          lineStyle: {
            color: "#B5B5B5"
          }
        },
        //   坐标轴 刻度
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#666",
          fontSize: 15
        }, // 坐标轴标签
        splitLine: {
          //网格线
          show: true,
          lineStyle: {
            color: "#e2e2e2"
          }
        }
      },
      yAxis: {
        type: "category",
        name: "分数",
        nameTextStyle: {
          // 坐标轴名称样式
          color: "#666",
          fontSize: 15
        },
        axisLine: {
          // 坐标轴 轴线
          show: true, // 是否显示
          //  -----   箭头 -----
          symbol: ["none", "arrow"], // 是否显示轴线箭头
          symbolSize: [8, 8], // 箭头大小
          symbolOffset: [0, 7], // 箭头位置

          // ----- 线 -------
          lineStyle: {
            color: "#B5B5B5",
            width: 1,
            type: "solid"
          }
        }, // gird 区域中的分割线
        axisLabel: {
          show: true,
          color: "#666",
          fontSize: 15
          // rotate: 30,
        }, // 坐标轴标签
        data: data02
      },
      series: [
        {
          type: "bar",
          data: data01,
          z: 3,
          label: {
            normal: {
              position: "right",
              show: true,
              fontSize: 15,
              color: "#666",
              formatter: "{c}人"
            }
          },
          itemStyle: {
            normal: {
              // color:['#86CB78','#85B3FF','#FFCF84','#FFA518','#FF635E'],
              color: function(params) {
                //首先定义一个数组
                let colorList = ["#94C8DC", "#A7D7E9", "#DBE1EF", "#BBDDD5", "#61BFBF", "#61BFBF", "#BBDDD5", "#DBE1EF", "#A7D7E9", "#94C8DC"]
                return colorList[params.dataIndex]
              }
            }
          }
        }
      ]
    })
  }

  render() {
    const { ids } = this.props
    return <div id={ids} className="chart"></div>
  }
}
export default BarChartLeft
